/**
 * @description 设置表头
 * @author wangjianjun
 */

import React, { PureComponent } from 'react';
import { PrimaryGhostC } from '../../../../comps';
import { Popover, Tree, Button, message } from 'antd';
import { connect } from 'dva';
import _ from 'lodash';
import style from '../index.less';

@connect(({ positionInquiryM }) => ({
  positionInquiryM,
}))
export default class SetColumns extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      selectedKeys: [],
      checkedKeysInfo: [], // 详情和发行人基本信息
    };
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const init = JSON.stringify(this.state.checkedKeysInfo);
    const initN = !nextProps.checkedKeysInfo ? '' : JSON.stringify(nextProps.checkedKeysInfo[Number(nextProps.type)].checkedKeys);
    if (init != initN) {
      this.setState({
        checkedKeysInfo: _.cloneDeep(nextProps.checkedKeysInfo[Number(nextProps.type)].checkedKeys),
      });
    }
  }

  handleVisibleChange = (visible) => {
    this.setState({
      visible: visible,
    });
  };

  onSelect = (selectedKeys, info) => {
    this.setState({
      checkedKeysInfo: selectedKeys,
    });
  };

  cancelAction = () => {
    const {
      positionInquiryM: { checkedKeysInfo },
      type,
    } = this.props;
    this.setState({
      visible: false,
      checkedKeysInfo: _.cloneDeep(checkedKeysInfo)[Number(type)].checkedKeys,
    });
  };

  handleOk = () => {
    const {
      positionInquiryM: { columnsInfo, checkedKeysInfo },
      type,
    } = this.props;
    const newType = Number(type);

    if (this.state.checkedKeysInfo.length == 0) {
      message.warning('请至少选择一列');
      return;
    }
    let newColumnsInfo = _.cloneDeep(columnsInfo);
    let NewCheckedKeysInfo = _.cloneDeep(checkedKeysInfo);
    newColumnsInfo[newType].columns.map((item) => {
      item.display = false;
      this.state.checkedKeysInfo.map((item1) => {
        if (item1 == item.key) {
          item.display = true;
        }
      });
    });

    if (newType == 1) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        1: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 2) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        2: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 31) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        31: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 32) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        32: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 4) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        4: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 5) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        5: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 6) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        6: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 7) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        7: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 8) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        8: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 9) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        9: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 10) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        10: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 11) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        11: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 111) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        111: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 112) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        112: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 12) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        12: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 13) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        13: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 14) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        14: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 15) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        15: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 16) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        16: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 17) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        17: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 18) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        18: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    this.props.dispatch({
      type: 'positionInquiryM/save',
      payload: {
        columnsInfo: newColumnsInfo,
        checkedKeysInfo: NewCheckedKeysInfo,
        isHkStk: this.props.isHkStk,
      },
    });
    this.setState({
      visible: false,
    });
    this.props.dispatch({
      type: 'positionInquiryM/saveCol',
      payload: {
        type: this.props.parameter,
        columns: newColumnsInfo[newType].columns,
        isHkStk: this.props.isHkStk,
      },
    });
  };

  render() {
    const {
      positionInquiryM: { columnsInfo },
      type,
    } = this.props;
    const newType = Number(type);
    const content = (
      <div>
        <Tree treeData={columnsInfo[newType].treeData} checkable defaultExpandAll checkedKeys={this.state.checkedKeysInfo} onCheck={this.onSelect} />
        <div className='btnArea'>
          <div className='btnCol'>
            <Button onClick={this.cancelAction} className='reset-button ' style={{ marginLeft: '56px' }}>
              取消
            </Button>
            <Button onClick={this.handleOk} className='search-button ' style={{ marginLeft: '11px' }}>
              确定
            </Button>
          </div>
        </div>
      </div>
    );

    return (
      <div>
        <Popover
          placement='bottomLeft'
          content={content}
          trigger='click'
          visible={this.state.visible}
          overlayClassName={style.shstyle}
          onVisibleChange={this.handleVisibleChange}
          style={{ height: '317px', width: '240px' }}
        >
          <PrimaryGhostC title='列选择' style={{ marginBottom: '10px' }} />
        </Popover>
      </div>
    );
  }
}
